import { h } from 'vue'
import JVxeToolbar from '../components/JVxeToolbar.vue'
import { JVxeDataProps, JVxeTableMethods, JVxeTableProps } from '../types'

export function useToolbar(props: JVxeTableProps, data: JVxeDataProps, methods: JVxeTableMethods, $slots) {

  /** 渲染工具栏 */
  function renderToolbar() {
    if (props.toolbar) {
      return h(JVxeToolbar, {
        size: props.size,
        disabled: props.disabled,
        toolbarConfig: props.toolbarConfig,
        disabledRows: props.disabledRows,
        hasBtnAuth: methods.hasBtnAuth,
        selectedRowIds: data.selectedRowIds.value,
        // 新增事件
        onAdd: () => methods.addRows(),
        // 保存事件
        onSave: () => methods.trigger('save'),
        onRemove() {
          let $table = methods.getXTable()
          let deleteRows = methods.filterNewRows(data.selectedRows.value)
          // 触发删除事件
          if (deleteRows.length > 0) {
            let removeEvent: any = { deleteRows, $table, target: this }
            if (props.asyncRemove) {
              // 确认删除，只有调用这个方法才会真删除
              removeEvent.confirmRemove = () => methods.removeSelection()
            } else {
              methods.removeSelection()
            }
            methods.trigger('removed', removeEvent)
          } else {
            methods.removeSelection()
          }
        },
        // 清除选择事件
        onClearSelection: () => methods.clearSelection(),
        onRegister: ({ xToolbarRef }) => methods.getXTable().connect(xToolbarRef.value),
      }, {
        toolbarPrefix: $slots.toolbarPrefix,
        toolbarSuffix: $slots.toolbarSuffix,
      })
    }
    return null
  }

  return { renderToolbar }
}

